<template>
  <PanelBlock>
    <span style="display: flex">
      <img style="height: 80px; width: 80px; margin-right: 20px; border-radius: 5px" :src="data.image_key">
      <span style="display: flex; flex-direction: column">
        <span class="clickable enterpriseName" @click="toEnterprise(data.id)">{{ data.name }}</span>
        <span class="secondaryInfo">{{ data.industry }}</span>
        <span class="secondaryInfo">{{ "关注：" + data.follow_cnt }}</span>
      </span>
    </span>
    <span style="display: flex">
      <my-button type="light" :width="200" @click="toChat(data.admin_id)">{{ "立刻沟通: " + data.admin_name + "经理" }}</my-button>
      <my-button style="margin-left: 20px" type="light" :width="80">关注</my-button>
    </span>

  </PanelBlock>
</template>

<script>
import { ElButton, ElTag } from "element-plus";
import PanelBlock from "@/components/PanelBlock.vue";
import MyButton from "@/components/common/myButton.vue";
export default {
  name: "EnterpriseEle",
  components: {MyButton, PanelBlock},
  props: {
    data: {
      type: Object,
      default: () => ({
        id: 1,
        name: "神奇技术公司",
        industry: "IT",
        image_key: "https://p2.itc.cn/q_70/images03/20220826/4420c63c8fd849f1933cc21315a9b72b.jpeg",
        follow_cnt: 12,
        admin_id: 1,
        admin_name: "58Q83"
      })
    }
  },
  methods: {
    toEnterprise(id) {
      this.$router.push({path: "/enterprise", query: {enterpriseId: id} });
    },
    toChat(id) {
      this.$router.push({path: "/chat", query: {id: id} });
    }
  }
}
</script>

<style scoped>
.enterpriseName {
  font-weight: 600;
  font-size: var(--font-size-large);
}
.secondaryInfo {
  font-size: var(--font-size-small);
  color: grey
}

.clickable:hover {
  cursor: pointer;
  color: var(--color-primary);
  text-decoration: underline;
}
</style>